<template>
  <div class="card-list" ref="content" >
    <a-list
      rowKey="id"
      :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
      :dataSource="dataSource"
      :loading="tableLoding"
    >
      <a-list-item slot="renderItem" slot-scope="item">
        <template v-if="!item || item.id === undefined">
          <a-button class="new-btn" type="dashed" @click="showAdd">
            <a-icon type="plus"/>
            新增轮播图
          </a-button>
        </template>
        <template v-else>
          <a-card :hoverable="true">
            <a-card-meta>
              <a slot="title">{{item.title}}</a>
              <!-- <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/> -->
              <div class="meta-content" slot="description">
                <div style="padding-bottom:10px;width:460px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                    轮播图片: <a :href="item.img_path" target="_blank">{{item.img_path}}</a>
                </div> 
                <div style="padding-bottom:10px;width:460px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                    打开方式: {{item.type}}
                </div> 
                <div style="padding-bottom:10px;width:460px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
                    打开链接: {{item.urls}}
                </div> 
                <!-- <div class="meta-box">
                </div> -->
              </div>
            </a-card-meta>
            <template class="ant-card-actions" slot="actions">
              <a @click="upItem(item)">修改</a>
              <a @click="delItem(item)">删除</a>
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>
    <a-modal title="新增轮播图" class="add_modal" v-model="modalAdd" :footer="null"  :width="1200" :loading="upLoding">
      <div class="add_modal_content">
        <a-form class="add_modal_form" @submit="handleSubmit" :form="form">
        <div class="form-item-row">
          <a-form-item
            label="标题"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
            <a-input
            v-decorator="[
                'title',
                {rules: [{ required: true }]}
            ]"
            name="title"
            placeholder="" />
          </a-form-item>
          <a-form-item
              label="打开方式"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
             
            <a-radio-group 
                v-decorator="[
                    'type',
                    {rules: [{ required: true }]}
                ]">
                <a-radio :value="0">
                无动作
                </a-radio>
                <a-radio :value="1">
                跳转外链
                </a-radio>
                <a-radio :value="2">
                跳转文章
                </a-radio>
            </a-radio-group>
          </a-form-item>
        </div>
        <div class="form-item-row">
          <a-form-item
              label="打开路径"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input
                v-decorator="['urls']"
                name="urls"
                placeholder="外链地址 或 公告文章ID 或留空"/>
          </a-form-item>
          <a-form-item
              label="轮播图片"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <div style="display:flex">
                <a-input
                  v-decorator="[
                    'img_path',
                    {rules: [{ required: true }]}
                  ]"
                  name="img_path"
                  :disabled="true" />
                <a-upload
                  name="files"
                  :multiple="true"
                  action="/api/v1/admin/uploadFile"
                  @change="handleImg_url($event,'img_path')"
                  :show-upload-list="false">
                  <a-button style="color:#fff;" type="primary">上传</a-button>
                </a-upload>
              </div>
              
          </a-form-item>
        </div>  
        <div style="text-align:right;margin-top:40px;">
          <a-button htmlType="submit" type="primary" style="margin-right:30px;color:#fff;">确认</a-button>
          <a-button style="margin-right:80px;" @click="hiedAdd">取消</a-button>
        </div>
      </a-form>
      </div>
      
    </a-modal>
    <!-- <a-modal class="img_modal" v-model="modalImg" :footer="null" :closable="false" :zIndex="1001" :width="480">
      <a-card hoverable style="width: 480px">
          <img
            alt="example"
            :src="defaultTmpImg"
            slot="cover"
          />
        </a-card>
    </a-modal> -->
  </div>
</template>

<script>

import { banneList, bannerAdd, delBanner,bannerMod } from '@/api/getData'
export default {
  name: 'Banner',
  data () {
    return {
      form: this.$form.createForm(this),
      dataSource: [],
      current: 1,
      pageSize: 11,
      total: 0,
      modalAdd: false,
      tableLoding: false,
      upLoding: false,
      modalImg: false,
      upBanner: false,
      currentItem: {}
    }
  },
  created(){
    this.getList()
  },
  methods: {
    upItem(item){
      this.upBanner = true
      this.modalAdd = true
      this.currentItem = item
      setTimeout(()=>{
        this.form.setFieldsValue({
            title: item.title,
            img_path: item.img_path,
            type: item.type_num,
            urls: item.urls
        });
      },300)

    },
    handleImg_url(info,key) {
      if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} 上传成功`);
          let obj = {};
          obj[key] = info.file.response.data.path
          this.form.setFieldsValue(obj);
      } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} 上传失败`);
      }
    },
    showAdd(){
      this.modalAdd = true
      setTimeout(()=>{
        this.form.setFieldsValue({
            title: '',
            img_path: '',
            type: '',
            urls: ''
        });
      },300)
    },
    hiedAdd(){
      this.modalAdd = false
    },
    getList(){
      this.tableLoding = true
      banneList().then(res=>{
        console.log(res)
        let reslist = res.data.list
        reslist.unshift({})
        this.dataSource = reslist
      }).finally(e=>{
          this.tableLoding = false
      })
    },
    delItem(item){
        let that = this;
        this.$confirm({
            title: '确认删除轮播?',
            content: '',
            onOk() {
            delBanner(item.id).then(res=>{
                console.log(res)
                if(res.code == 200){
                    that.$message.success(res.msg);
                    that.hiedAdd()
                    that.getList()
                }
            })
            },
            onCancel() {console.log('取消新增')}
        })
    },
    handleSubmit(e){
      let that = this;
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
            console.log('Received values of form: ', values)
            this.$confirm({
                title: that.upBanner?'确认修改轮播?':'确认新增轮播?',
                content: '',
                onOk() {
                  if(that.upBanner){
                    bannerMod(values.title,values.img_path,values.type_num,values.urls,that.currentItem.id).then(res=>{
                      console.log(res)
                      if(res.code == 200){
                          that.$message.success(res.msg);
                          that.hiedAdd()
                          that.getList()
                      }
                    })
                  }else{
                    bannerAdd(values.title,values.img_path,values.type,values.urls).then(res=>{
                      console.log(res)
                      if(res.code == 200){
                          that.$message.success(res.msg);
                          that.hiedAdd()
                          that.getList()
                      }
                    })
                  }
                
                },
                onCancel() {console.log('取消新增')}
            })
          
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~@/components/index.less";

  .card-list {
    /deep/ .ant-card-body:hover {
      .ant-card-meta-title>a {
        color: @primary-color;
      }
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 12px;

      &>a {
        display: inline-block;
        max-width: 100%;
        color: rgba(0,0,0,.85);
      }
    }

    /deep/ .meta-content {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
    //   height: 54px;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;

    //   margin-bottom: 1em;
    }
  }

  .card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .ant-card-actions {
    background: #f7f9fa;

    li {
      float: left;
      text-align: center;
      margin: 12px 0;
      color: rgba(0, 0, 0, 0.45);
      width: 50%;

      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }

      a {
        color: rgba(0, 0, 0, .45);
        line-height: 22px;
        display: inline-block;
        width: 100%;
        &:hover {
          color: @primary-color;
        }
      }
    }
  }

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 188px;
  }
.form-item-row{
    display: flex;
    margin-bottom: 15px
}
.form-item-row>div{
    flex: 1;
}
.form-item-row .ant-input{
    width: 260px !important;
}
.add_modal_content{
  display: flex;
}
.add_modal_form{
  flex: 1;
}
.meta-box{
  margin-top: 10px;
  display: flex;
  align-items: center;
//   justify-content: space-around;
}
.ant-card-hoverable {
    cursor: default;
}
</style>
